import { useEffect, useRef } from "react";

interface WaterMarkProps {
    content: string;
    style?: React.CSSProperties;
}

export const WaterMark = (props: WaterMarkProps) => {
    const {
        content,
        style,
    } = props
    const ref = useRef<HTMLCanvasElement>(null)

    useEffect(() => {
        const canvas = ref.current
        if (canvas) {
            const ctx = canvas.getContext('2d')
            if (ctx) {
                const width = document.documentElement.scrollWidth
                const height = document.documentElement.scrollHeight
                // 设置画布大小为传入的尺寸
                canvas.width = width
                canvas.height = height

                // 设置字体样式
                ctx.font = '16px Arial'
                ctx.fillStyle = 'rgba(0, 0, 0, 0.1)'

                // 计算需要渲染的行数和列数
                const rows = Math.ceil(height / 200)
                const cols = Math.ceil(width / 300)

                // 遍历每个区域并渲染水印
                for (let row = 0; row < rows; row++) {
                    for (let col = 0; col < cols; col++) {
                        // 保存当前状态
                        ctx.save()
                        
                        // 移动到当前区域的位置
                        ctx.translate(col * 300 + 150, row * 200 + 100)
                        // 旋转15度
                        ctx.rotate(Math.PI / 24)
                        
                        // 绘制水印文本
                        ctx.fillText(content, -50, 0)
                        
                        // 恢复状态
                        ctx.restore()
                    }
                }
            }
        }
    }, [content])
    return <canvas className="pointer-events-none absolute top-0 left-0" ref={ref} style={style} />
}